<template>
  <div class="home-index">
    <!-- 歌单推荐 -->
    <div class="recommend mod_bg" @click="toLogin">
      <div class="recommend-inner">
        <h2 class="title"></h2>
        <div class="tab">
          <a href="javascript:;" class="current">为你推荐</a>
          <a href="javascript:;">90年代</a>
          <a href="javascript:;">快乐</a>
          <a href="javascript:;">官方歌单</a>
          <a href="javascript:;">情歌</a>
          <a href="javascript:;">网络歌曲</a>
        </div>
        <el-carousel :autoplay="false" class="carousel" indicator-position="outside">
          <el-carousel-item class="carousel-box">
            <ul class="carousel-list">
              <li class="carousel-item" v-for="item in recommendList.list1" :key="item.id">
                <div class="img">
                  <img v-lazy="item.picUrl" />
                  <i class="mask"></i>
                  <i class="bofang"></i>
                </div>
                <a href="#" class="playlist__txt tit">{{item.name}}</a>
                <div class="playlist__other">播放量: {{(item.playCount/10000).toFixed(1)}}万</div>
              </li>
            </ul>
          </el-carousel-item>
          <el-carousel-item class="carousel-box">
            <ul class="carousel-list">
              <li class="carousel-item" v-for="item in recommendList.list2" :key="item.id">
                <div class="img">
                  <img v-lazy="item.picUrl" />
                  <i class="mask"></i>
                  <i class="bofang"></i>
                </div>
                <a href="#" class="playlist__txt tit">{{item.name}}</a>
                <div class="playlist__other">播放量: {{(item.playCount/10000).toFixed(1)}}万</div>
              </li>
            </ul>
          </el-carousel-item>
          <el-carousel-item class="carousel-box">
            <ul class="carousel-list">
              <li class="carousel-item" v-for="item in recommendList.list3" :key="item.id">
                <div class="img">
                  <img v-lazy="item.picUrl" />
                  <i class="mask"></i>
                  <i class="bofang"></i>
                </div>
                <a href="#" class="playlist__txt tit">{{item.name}}</a>
                <div class="playlist__other">播放量: {{(item.playCount/10000).toFixed(1)}}万</div>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 新歌首发 -->
    <div class="newStart mod_bg">
      <div class="newStart-inner" @click="toMusicPlayer">
        <h2 class="title"></h2>
        <el-button class="newStart-play" icon="el-icon-caret-right">播放全部</el-button>
        <div class="tab">
          <a href="javascript:;" class="current">最新</a>
          <a href="javascript:;">内地</a>
          <a href="javascript:;">港台</a>
          <a href="javascript:;">欧美</a>
          <a href="javascript:;">韩国</a>
          <a href="javascript:;">日本</a>
        </div>
        <div @click="toSinger">
          <el-carousel :autoplay="false" class="carousel" indicator-position="outside">
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="swiper-slide" v-for="song in newStartList.list1" :key="song.id">
                  <div class="newStart-item-box">
                    <a class="img">
                      <img v-lazy="song.picUrl" />
                      <i class="mask"></i>
                      <i class="bofang" :data-songid="song.id"></i>
                    </a>
                    <div class="item-con">
                      <div class="item-song">
                        <a href="javascript:;">{{song.name}}</a>
                      </div>
                      <div class="item-author">
                        <span href="javascript:;" :data-singerid="song.artistId">{{song.artist}}</span>
                      </div>
                      <div class="item-time">{{song.duration}}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="swiper-slide" v-for="song in newStartList.list2" :key="song.id">
                  <div class="newStart-item-box">
                    <a class="img">
                      <img v-lazy="song.picUrl" />
                      <i class="mask"></i>
                      <i class="bofang" :data-songid="song.id"></i>
                    </a>
                    <div class="item-con">
                      <div class="item-song">
                        <a href="javascript:;">{{song.name}}</a>
                      </div>
                      <div class="item-author">
                        <span href="javascript:;" :data-singerid="song.artistId">{{song.artist}}</span>
                      </div>
                      <div class="item-time">{{song.duration}}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="swiper-slide" v-for="song in newStartList.list3" :key="song.id">
                  <div class="newStart-item-box">
                    <a class="img">
                      <img v-lazy="song.picUrl" />
                      <i class="mask"></i>
                      <i class="bofang" :data-songid="song.id"></i>
                    </a>
                    <div class="item-con">
                      <div class="item-song">
                        <a href="javascript:;">{{song.name}}</a>
                      </div>
                      <div class="item-author">
                        <span href="javascript:;" :data-singerid="song.artistId">{{song.artist}}</span>
                      </div>
                      <div class="item-time">{{song.duration}}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="swiper-slide" v-for="song in newStartList.list4" :key="song.id">
                  <div class="newStart-item-box">
                    <a class="img">
                      <img v-lazy="song.picUrl" />
                      <i class="mask"></i>
                      <i class="bofang" :data-songid="song.id"></i>
                    </a>
                    <div class="item-con">
                      <div class="item-song">
                        <a href="javascript:;">{{song.name}}</a>
                      </div>
                      <div class="item-author">
                        <span href="javascript:;" :data-singerid="song.artistId">{{song.artist}}</span>
                      </div>
                      <div class="item-time">{{song.duration}}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="swiper-slide" v-for="song in newStartList.list5" :key="song.id">
                  <div class="newStart-item-box">
                    <a class="img">
                      <img v-lazy="song.picUrl" />
                      <i class="mask"></i>
                      <i class="bofang" :data-songid="song.id"></i>
                    </a>
                    <div class="item-con">
                      <div class="item-song">
                        <a href="javascript:;">{{song.name}}</a>
                      </div>
                      <div class="item-author">
                        <span href="javascript:;" :data-singerid="song.artistId">{{song.artist}}</span>
                      </div>
                      <div class="item-time">{{song.duration}}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 精彩推荐 -->
    <div class="goods mod_bg">
      <div class="goods-inner">
        <h2 class="title"></h2>
        <el-carousel :autoplay="false" type="card" height="280px" trigger="click">
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4026693.jpg" alt />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4026719.jpg" alt />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4026734.jpg" alt />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4026760.jpg" alt />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4026837.jpg" alt />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="goods-img">
              <img src="./images/4027598.jpg" alt />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 新碟首发 -->
    <div class="newalbum mod_bg">
      <div class="newalbum-inner">
        <h2 class="title"></h2>
        <div class="more">
          更多
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="tab" @click="toggleNewAlbum">
          <!-- ALL:全部,ZH:华语,EA:欧美,KR:韩国,JP:日本 -->
          <a href="javascript:;" data-id="ALL" :class="currentB==='ALL'?'current':''">全部</a>
          <a href="javascript:;" data-id="ZH" :class="currentB==='ZH'?'current':''">华语</a>
          <a href="javascript:;" data-id="EA" :class="currentB==='EA'?'current':''">欧美</a>
          <a href="javascript:;" data-id="KR" :class="currentB==='KR'?'current':''">韩国</a>
          <a href="javascript:;" data-id="JP" :class="currentB==='JP'?'current':''">日本</a>
        </div>
        <div @click="toSinger">
          <el-carousel
            v-loading="loading"
            :autoplay="false"
            class="carousel"
            indicator-position="outside"
          >
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="newalbum-item-box" v-for="item in newAlbumList.list1" :key="item.id">
                  <div class="img">
                    <img v-lazy="item.picUrl" />
                    <i class="mask"></i>
                    <i class="bofang"></i>
                  </div>
                  <div class="item-con">
                    <div class="item-song tit">
                      <a href="javascript:;">{{item.name}}</a>
                    </div>
                    <div class="item-author">
                      <span
                        href="javascript:;"
                        :data-singerid="item.artists[0].id"
                      >{{item.artists[0].name}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="newalbum-item-box" v-for="item in newAlbumList.list2" :key="item.id">
                  <div class="img">
                    <img v-lazy="item.picUrl" />
                    <i class="mask"></i>
                    <i class="bofang"></i>
                  </div>
                  <div class="item-con">
                    <div class="item-song tit">
                      <a href="javascript:;">{{item.name}}</a>
                    </div>
                    <div class="item-author">
                      <span
                        href="javascript:;"
                        :data-singerid="item.artists[0].id"
                      >{{item.artists[0].name}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="ranking mod_bg">
      <div class="ranking-inner">
        <h2 class="title"></h2>
        <div class="more">
          更多
          <i class="el-icon-arrow-right"></i>
        </div>
        <ul class="ranking-content" @click="toSinger">
          <li class="ranking-item ranking-item1">
            <div class="item-con">
              <div class="item-bg"></div>
              <i class="item-play bofang"></i>
              <i class="item-line"></i>
              <h3 class="item-head">
                <span class="item-head-tit">热歌</span>
              </h3>
              <ul class="item-songlist">
                <li class="item-song" v-for="(hot,index) in topList.hot" :key="hot.id">
                  <div class="song-num">{{index+1}}</div>
                  <div class="songname">
                    <a href="javascript:;">{{hot.name}}</a>
                  </div>
                  <div class="item-author">
                    <a href="javascript:;" :data-singerid="hot.singerId">{{hot.artist}}</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="ranking-item ranking-item1">
            <div class="item-con">
              <div class="item-bg"></div>
              <i class="item-play bofang"></i>
              <i class="item-line"></i>
              <h3 class="item-head">
                <span class="item-head-tit">新歌</span>
              </h3>
              <ul class="item-songlist">
                <li class="item-song" v-for="(item,index) in topList.new" :key="item.id">
                  <div class="song-num">{{index+1}}</div>
                  <div class="songname">
                    <a href="javascript:;">{{item.name}}</a>
                  </div>
                  <div class="item-author">
                    <a href="javascript:;" :data-singerid="item.singerId">{{item.artist}}</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="ranking-item ranking-item2">
            <div class="item-con">
              <div class="item-bg"></div>
              <i class="item-play bofang"></i>
              <i class="item-line"></i>
              <h3 class="item-head">
                <span class="item-head-tit">流行指数</span>
              </h3>
              <ul class="item-songlist">
                <li class="item-song" v-for="(item,index) in topList.popular" :key="item.id">
                  <div class="song-num">{{index+1}}</div>
                  <div class="songname">
                    <a href="javascript:;">{{item.name}}</a>
                  </div>
                  <div class="item-author">
                    <a href="javascript:;" :data-singerid="item.singerId">{{item.artist}}</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="ranking-item ranking-item3">
            <div class="item-con">
              <div class="item-bg"></div>
              <i class="item-play bofang"></i>
              <i class="item-line"></i>
              <h3 class="item-head">
                <span class="item-head-tit">欧美</span>
              </h3>
              <ul class="item-songlist">
                <li class="item-song" v-for="(item,index) in topList.UK" :key="item.id">
                  <div class="song-num">{{index+1}}</div>
                  <div class="songname">
                    <a href="javascript:;">{{item.name}}</a>
                  </div>
                  <div class="item-author">
                    <a href="javascript:;" :data-singerid="item.singerId">{{item.artist}}</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="ranking-item ranking-item4">
            <div class="item-con">
              <div class="item-bg"></div>
              <i class="item-play bofang"></i>
              <i class="item-line"></i>
              <h3 class="item-head">
                <span class="item-head-tit">韩国</span>
              </h3>
              <ul class="item-songlist">
                <li class="item-song" v-for="(item,index) in topList.Korea" :key="item.id">
                  <div class="song-num">{{index+1}}</div>
                  <div class="songname">
                    <a href="javascript:;">{{item.name}}</a>
                  </div>
                  <div class="item-author">
                    <a href="javascript:;" :data-singerid="item.singerId">{{item.artist}}</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- MV -->
    <div class="mv mod_bg">
      <div class="mv-inner">
        <h2 class="title"></h2>
        <div class="more">
          更多
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="tab" @click="toggleMV">
          <a href="javascript:;" :class="currentA?'':'current'">全部</a>
          <a href="javascript:;" :class="currentA === '内地'?'current':''">内地</a>
          <a href="javascript:;" :class="currentA === '港台'?'current':''">港台</a>
          <a href="javascript:;" :class="currentA === '欧美'?'current':''">欧美</a>
          <a href="javascript:;" :class="currentA === '日本'?'current':''">日本</a>
          <a href="javascript:;" :class="currentA === '韩国'?'current':''">韩国</a>
        </div>
        <div @click="toSinger">
          <el-carousel
            v-loading="loading"
            :autoplay="false"
            class="carousel"
            indicator-position="outside"
          >
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="mv-item-box" v-for="item in mvList.list1" :key="item.id">
                  <a href="javascript:;" class="img">
                    <img v-lazy="item.cover" :alt="item.name" />
                    <i class="mask"></i>
                    <i class="bofang"></i>
                  </a>
                  <h3 class="item-title tit">
                    <a href="javascript:;">{{item.name}}</a>
                  </h3>
                  <p class="item-author" :data-singerid="item.artistId">{{item.artists[0].name}}</p>
                  <div class="item-info">
                    <span>
                      <i class="el-icon-video-camera"></i>
                      {{item.playCount}}
                    </span>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item class="carousel-box">
              <ul class="carousel-list">
                <li class="mv-item-box" v-for="item in mvList.list2" :key="item.id">
                  <a href="javascript:;" class="img">
                    <img v-lazy="item.cover" :alt="item.name" />
                    <i class="mask"></i>
                    <i class="bofang"></i>
                  </a>
                  <h3 class="item-title tit">
                    <a href="javascript:;">{{item.name}}</a>
                  </h3>
                  <p class="item-author" :data-singerid="item.artistId">{{item.artists[0].name}}</p>
                  <div class="item-info">
                    <span>
                      <i class="el-icon-video-camera"></i>
                      {{item.playCount}}
                    </span>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <Login />
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import moment from "moment";
import Login from "../../components/Login";
import {
  getRecommendList,
  getNewStartList,
  getNewAlbumList,
  getTopList,
  getMVList,
} from "../../api/home";
export default {
  name: "Home",
  data() {
    return {
      loading: false,
      currentA: "",
      currentB: "ALL",
      recommendList: {
        list1: [],
        list2: [],
        list3: [],
      },
      newStartList: {
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: [],
        list6: [],
      },
      newAlbumList: {
        list1: [],
        list2: [],
      },
      topList: {
        hot: [],
        new: [],
        popular: [],
        UK: [],
        Korea: [],
      },
      mvList: {
        list1: [],
        list2: [],
      },
    };
  },
  mounted() {
    //推荐歌单
    getRecommendList().then((res) => {
      //长列表性能优化 只需要数据展示不需要任何改变
      this.recommendList.list1 = res.result.slice(0, 5);
      this.recommendList.list2 = res.result.slice(5, 10);
      this.recommendList.list3 = res.result.slice(10, 15);
    });
    //新歌首发
    getNewStartList().then((res) => {
      const newData = res.result.reduce((p, c) => {
        const obj = {};
        obj.name = c.name;
        obj.picUrl = c.picUrl;
        obj.artist = c.song.artists[0].name;
        obj.artistId = c.song.artists[0].id;
        obj.duration = moment(c.song.duration).format("mm:ss");
        obj.id = c.id;
        p.push(obj);
        return p;
      }, []);

      this.newStartList.list1 = newData.slice(0, 9);
      this.newStartList.list2 = newData.slice(9, 18);
      this.newStartList.list3 = newData.slice(18, 27);
      this.newStartList.list4 = newData.slice(27, 36);
      this.newStartList.list5 = newData.slice(36, 45);
    });
    //新碟推荐
    // `area` : ALL:全部,ZH:华语,EA:欧美,KR:韩国,JP:日本
    this.getNewAlbum("ALL");
    //排行榜
    //新歌榜:3779629  热歌:3778678  韩国:745956260  欧美:180106  流行:5338990334
    this.getTop("3779629");
    this.getTop("3778678");
    this.getTop("745956260");
    this.getTop("180106");
    this.getTop("5338990334");
    //mv
    // area：地区，可选值为内地,港台,欧美,日本,韩国,不填则为全部
    this.getMV();
  },
  components: {
    Login,
  },
  methods: {
    //排行榜
    getTop(id) {
      getTopList(id).then((res) => {
        const newData = res.playlist.tracks.slice(0, 3).reduce((p, c) => {
          const obj = {};
          obj.name = c.name;
          obj.id = c.id;
          obj.artist = c.ar[0].name;
          obj.singerId = c.ar[0].id;
          p.push(obj);
          return p;
        }, []);
        //新歌榜:3779629  热歌:3778678  韩国:745956260  欧美:180106  流行:5338990334
        if (id === "3779629") {
          this.topList.new = newData;
          return;
        }
        if (id === "3778678") {
          this.topList.hot = newData;
          return;
        }
        if (id === "745956260") {
          this.topList.Korea = newData;
          return;
        }
        if (id === "180106") {
          this.topList.UK = newData;
          return;
        }
        if (id === "5338990334") {
          this.topList.popular = newData;
          return;
        }
      });
    },
    //新碟推荐
    getNewAlbum(area) {
      getNewAlbumList(area).then((res) => {
        this.newAlbumList.list1 = [];
        this.newAlbumList.list2 = [];
        this.newAlbumList.list1 = res.albums.slice(0, 10);
        this.newAlbumList.list2 = res.albums.slice(10, 20);
      });
    },
    //mv
    getMV(area) {
      getMVList(area).then((res) => {
        this.mvList.list1 = res.data.slice(0, 10);
        this.mvList.list2 = res.data.slice(10, 20);
      });
    },
    //点击切换mv
    async toggleMV(e) {
      if (e.target.nodeName === "A") {
        this.loading = true;
        if (e.target.innerText === "全部") {
          await this.getMV();
          this.currentA = "";
        } else {
          await this.getMV(e.target.innerText);
          this.currentA = e.target.innerText;
        }
        this.loading = false;
      }
    },
    //点击切换新碟
    async toggleNewAlbum(e) {
      if (e.target.nodeName === "A") {
        this.loading = true;
        await this.getNewAlbum(e.target.dataset.id);
        this.currentB = e.target.dataset.id;
        this.loading = false;
      }
    },
    //跳转到歌手页面
    toSinger(e) {
      if (e.target.dataset.singerid) {
        this.$router.history.push({
          name: "Singer",
          query: {
            singerId: e.target.dataset.singerid,
          },
        });
      }
    },
    //跳转到播放器
    toMusicPlayer(e) {
      if (e.target.dataset.songid) {
        console.log(e.target.dataset.songid);
        this.$router.history.push({
          name: "MusicPlayer",
          query: {
            songId: e.target.dataset.songid,
          },
        });
      }
    },
    //弹出登录页面
    toLogin(e) {
      if (e.target.nodeName === "I") {
        // 点击如果有token就不弹出登录框
        const userInfo = this.$store.state.userInfo;
        if (!userInfo) {
          // console.log(this.$store.commit);
          this.$store.commit("VISIBLE", true);
        }
      }
    },
  },
};
</script>

<style scoped>
.home-index .carousel .carousel-box {
  height: auto;
}
.home-index .el-carousel--horizontal {
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.mod_bg {
  background: url("./images/bg_detail.jpg") 50% 0 repeat-x;
}
.el-carousel__item {
  background-color: transparent !important;
}

/* 歌单推荐 */
.home-index .recommend {
  padding: 30px 0;
}
.home-index .title {
  background-image: url("./images/home-title.png");
  width: 196px;
  height: 40px;
  margin: 0 auto;
}
.home-index .tab {
  text-align: center;
  margin: 30px 0;
}
.home-index .tab a {
  padding: 0 24px;
  color: #333;
}
/* .home-index .el-carousel__container .el-carousel__arrow {
  width: 79px;
  height: 108px;
  border-radius: 0;
} */
.recommend-inner .title {
  background-position: 0px 0px;
}
.home-index a.current {
  color: #31c27c;
}
.carousel {
  padding: 10px 0;
}

.carousel-item {
  text-align: left;
}
.carousel-list {
  width: 1230px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.carousel-item .img {
  height: 224px;
  width: 224px;
  margin-bottom: 10px;
  cursor: pointer;
}
.carousel-item .playlist__txt {
  color: #000;
  font-size: 14px;
  display: inline-block;
}
.carousel-item .playlist__other {
  color: #999;
  font-size: 14px;
}

/* 新歌首发 */
.newStart .newStart-inner {
  position: relative;
}

.newStart-inner .title {
  background-position: 0 -45px;
}
.newStart .newStart-inner .bofang {
  transform: scale(0.7) translateZ(0);
}
.newStart-inner .newStart-play {
  position: absolute;
  top: 55px;
  left: 165px;
  font-size: 14px;
}
.newStart-play.el-button:active,
.newStart-play.el-button:hover,
.newStart-play.el-button:focus {
  background-color: #ededed;
  border-color: #c9c9c9;
  color: #000;
}

.newStart {
  padding: 30px 0;
}
.newStart-item-box {
  margin: 0 20px 13px 0;
  width: 390px;
  display: flex;
  align-items: center;
  text-align: left;
}
.newStart-item-box .img {
  display: inline-block;
  width: 86px;
  height: 86px;
  flex-shrink: 0;
}
.newStart-item-box .item-con {
  position: relative;
  width: 270px;
  margin-left: 15px;
}
.newStart-item-box .item-con .item-song {
  margin: 5px 0;
}
.newStart-item-box .item-con .item-song a {
  display: block;
  width: 200px;
}
.item-author,
.item-song a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.newStart-item-box .item-con .item-author {
  width: 185px;
  font-size: 14px;
}

.newStart-item-box .item-con .item-author span {
  color: #999;
}

.newStart-item-box .item-con .item-time {
  position: absolute;
  right: 0;
  top: 40%;
  color: #999;
  text-align: right;
  font-size: 14px;
}

/* 精彩推荐 */
.goods {
  padding: 30px 0;
}
.goods-inner .title {
  background-position: 0px -97px;
  margin-bottom: 50px;
}
.goods-inner .el-carousel {
  text-align: center;
  background-position: 0px -97px;
  margin-bottom: 50px;
}
.goods-img img {
  width: 590px;
  height: 236px;
}
/* 新碟首发 */
.newalbum {
  padding: 25px 0;
}
.newalbum-item-box .img {
  height: 224px;
  width: 224px;
  cursor: pointer;
}
.newalbum-inner {
  position: relative;
}
.newalbum-inner .item-con {
  text-align: left;
}
.newalbum-inner .title {
  background-position: 0 -145px;
}

.newalbum .el-carousel__container {
  height: 620px;
  text-align: center;
}

.newalbum .carousel {
  height: 650px;
}
.newalbum .carousel .carousel-box {
  height: 610px;
}
.el-carousel--horizontal {
  overflow: auto;
}
.newalbum-item-box {
  padding-bottom: 25px;
}
.more {
  position: absolute;
  right: 170px;
  top: 60px;
}

/* 排行榜 */
.ranking {
  padding: 30px 0;
}
.ranking-inner {
  position: relative;
}
.ranking-inner .title {
  background-position: 0px -195px;
}
.ranking-content {
  width: 1200px;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
}
.ranking-item {
  position: relative;
  width: 224px;
  height: 500px;
  margin: 45px 20px 20px 0;
  overflow: hidden;
}
.item-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 500px;
  transition: transform 0.75s;
  background-image: url("./images/bg_index_top.jpg");
}
.item-con {
  width: 100%;
}
.ranking-item1 .item-bg {
  background-position: 0 0;
}
.ranking-item2 .item-bg {
  background-position: -224px 0px;
}
.ranking-item3 .item-bg {
  background-position: -448px 0px;
}
.ranking-item4 .item-bg {
  background-position: -672px 0px;
}
.item-play {
  position: absolute;
  top: 154px;
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: 50%;
}
.ranking-item:hover .bofang {
  opacity: 1;
  transition: opacity 0.5s;
  transform: scale(1) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.ranking-item:hover .item-bg {
  transform: scale(1.1) translateZ(0);
}
.ranking-item:hover .item-line {
  opacity: 0;
}
.item-head::before {
  content: "";
  display: block;
  width: 66px;
  height: 22px;
  margin: 0 auto 9px;
  background-image: url("./images/home-title.png");
  background-position: 0 -300px;
}
.item-head {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  text-align: center;
}
.item-head-tit {
  float: none;
  height: 36px;
  line-height: 1;
  font-size: 26px;
  color: #fff;
  font-weight: 400;
}
.item-line {
  position: absolute;
  left: 50%;
  top: 153px;
  margin-left: -18px;
  width: 36px;
  height: 2px;
  background: #fff;
  opacity: 1;
}
.item-songlist {
  position: absolute;
  top: 188px;
  left: 35px;
  right: 30px;
  white-space: nowrap;
  text-align: left;
  color: #fff;
}
.item-songlist .item-song {
  position: relative;
  padding-left: 15px;
  margin-bottom: 27px;
}
.item-songlist .item-song .song-num {
  position: absolute;
  top: 0;
  left: 0;
}
.item-songlist .item-song .songname {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.item-songlist .item-song a {
  color: #fff;
}
/* MV */
.mv {
  padding: 30px 0;
}
.mv .el-carousel__container {
  height: 460px;
}

.mv .carousel,
.mv .carousel .carousel-box {
  height: 500px;
}
.mv-inner .title {
  background-position: 0px -250px;
}
.mv-inner {
  position: relative;
}
.mv-item-box {
  width: 224px;
  height: 207px;
  padding-bottom: 25px;
  text-align: left;
}
.mv-item-box .img {
  display: block;
  width: 224px;
  height: 126px;
  margin-bottom: 15px;
}
.mv-item-box .item-title {
  font-weight: 400;
}
.mv-item-box .item-author {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}
.mv-item-box .item-info {
  color: #999;
  font-size: 14px;
}
.mv-item-box .item-info i {
  font-size: 16px;
}
</style>